<!-- 参考：https://codepen.io/bramus/pen/eYBOvGW -->
<template>
  <div
    class="container"
    :style="props.style"
  >
    <h3 :style="props.style.titleStyle">{{ props.title }}</h3>
    <div
      class="box"
      :style="props.style.boxStyle"
    ></div>
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: "标题",
  },
  style: {
    type: Object,
    default: {},
  },
});
</script>

<style lang="scss" scoped>
.container {
  position: absolute;
  width: 400px;
  height: 300px;
}

.box {
  position: absolute;
  --angle: 0deg;
  width: 100%;
  height: 100%;
  border: 15px solid;
  border-image: linear-gradient(var(--angle), green, yellow) 1;

  animation: 10s rotate linear infinite;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
</style>
